<template>
  <el-row>
    <el-col :span="24">
      <a href="#"  class="alink" @click="drawer2 = true">&nbsp;<el-icon><CirclePlus /></el-icon>&nbsp;添加/编辑题库&nbsp;</a>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="24">
       <el-drawer v-model="drawer2" direction="rtl">
        <template #header>
          <h4>添加/编辑题库</h4>
        </template>
        <template #default>
          <el-row>
            <el-col :span="24" style="text-align: center">
              <el-button type="default" style="width: 40%;" class="btn" @click="changeTab(1)">手动添加</el-button>
              <el-button type="default" style="width: 40%" class="btn" @click="changeTab(2)">从文件添加</el-button>
            </el-col>
          </el-row>
          <el-row class="mg" v-if="saf === 1">
            <el-col :span="24">
              <el-row>
                <el-col :span="24">
                  <el-col :span="7" :offset="1" @click="changePage(1)">
                    <router-link to="/add" custom v-slot="{ isActive, navigate }">
                      <div class="d2 dataP">
                        <div :class="{ active: isActive }" @click="navigate" class="d">
                          <el-button type="primary" size="small">打开编辑页</el-button>
                        </div>
                      </div>
                    </router-link>
                  </el-col>
                </el-col>
              </el-row>
              <el-row class="mg">
                <el-col :span="12">
                  <el-statistic title="总题库数" :value="3" />
                </el-col>
                <el-col :span="12">
                  <el-statistic :value="138">
                    <template #title>
                      <div style="display: inline-flex; align-items: center">
                        总试卷数
                        <el-icon style="margin-left: 4px" :size="12">
                          <Male />
                        </el-icon>
                      </div>
                    </template>
                    <template #suffix>/100</template>
                  </el-statistic>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div>
                    <label>12</label>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="mg" v-if="saf === 2">
            <el-col :span="24">
              <div class="upload" @click="openFile">
                <el-icon class="upload_icon"><upload-filled /></el-icon>
                <div class="upload_text">
                  拖动文件到此处 或 <span class="upload_sp">点击选择文件上传</span>
                </div>
              </div>
              <span class="upload_text">点击下方链接下载模板文件</span><br>
              <a href="#" style="font-size: small">文件下载</a>
            </el-col>

          </el-row>
        </template>
        <template #footer>
          <div style="flex: auto">
            <el-button @click="cancelClick">取消</el-button>
            <el-button type="primary" @click="confirmClick">确认</el-button>
          </div>
        </template>
      </el-drawer>
    </el-col>
  </el-row>
</template>


<script setup lang="ts">
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import showPageStore from "../store/showPageStore";
const sp = showPageStore()

const saf = ref(1)
const changeTab = async (s) => {
  saf.value = s
  if (s == 2){
    await myApi.makeFile("overview.json")
  }
}

const changePage = (num) => {
  sp.setNum(num)
}

const openFile = async () => {
  const result = await myApi.openFile()
}


const tcs = reactive({
  tc: [
      {name: '公共基础知识'},
      {name: '公共基础'},
      {name: '公知识'},
  ]
})
// do not use same name with ref
const paper = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}

const drawer = ref(false)
const drawer2 = ref(false)
const direction = ref('rtl')
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
function cancelClick() {
  drawer2.value = false
}
function confirmClick() {
  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
      .then(() => {
        drawer2.value = false
      })
      .catch(() => {
        // catch error
      })
}
</script>

<style scoped>
.alink{
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: small;
  padding: 5px;
  border-radius: 50px;
  background: linear-gradient(90deg, rgba(0,228,255,1) 0%, rgba(170,222,129,1) 100%);
}
.btn{
  color: white;
  font-weight: bold;
  font-size: small;
  padding: 5px;
  border-radius: 50px;
  background: linear-gradient(90deg, rgba(0,228,255,1) 0%, rgba(170,222,129,1) 100%);
  width: 45%;
}
.upload{
  border: lightskyblue 1px dashed;
  border-radius: 20px;
  text-align: center;
  padding: 30px;
  cursor: pointer;
}
.upload_icon{
  font-size: 60px;
  color: lightgray;
}
.upload_text{
  font-size: small;
  color: gray;
}
.upload_sp{
  color: deepskyblue;
}
</style>